<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				数据统计
			</div>
			<div >
				<el-row>
					<el-col :span="7">
						<div class="pt-[10px] pb-[10px] pl-[20px] bg-[#0054A6] color-fff" >热门市场（成交地区）</div>
						<el-table size="large" :data="list"
							:header-cell-style="{'background':'#fff','color':'#0054A6','line-height':'52px','padding':'14px 0'}"
							:cell-style="{'color':'#0054A6','padding':'20px 0'}">
							<el-table-column label="成交地区" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">0133</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="排名" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">1</span>
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div style="background-color: #fff;" class="p-[20px] v-flex v-row-right">
							<el-pagination background layout="prev, pager, next" :default-page-size="6" :total="1000" :pager-count="5"/>
						</div>
					</el-col>
					<el-col :span="7" class="ml-[30px]">
						<div class="pt-[10px] pb-[10px] pl-[20px] bg-[#0054A6] color-fff" >货代成交率（总成交率：23%）</div>
						<el-table size="large" :data="list"
							:header-cell-style="{'background':'#fff','color':'#0054A6','line-height':'52px','padding':'14px 0'}"
							:cell-style="{'color':'#0054A6','padding':'20px 0'}">
							<el-table-column label="货代名称" prop="scene_name" align="center">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">0133</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="报价次数" prop="scene_name" align="center">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">1</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="成交次数" prop="scene_name" align="center">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">0133</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="成交率" prop="scene_name" align="center">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">1%</span>
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div style="background-color: #fff;" class="p-[20px] v-flex v-row-right">
							<el-pagination background layout="prev, pager, next" :default-page-size="6" :total="1000" :pager-count="5"/>
						</div>
					</el-col>
					<el-col :span="7" class="ml-[30px]">
						<div class="pt-[10px] pb-[10px] pl-[20px] bg-[#0054A6] color-fff" >供应商成交率（总成交率：23%）</div>
						<el-table size="large" :data="list"
							:header-cell-style="{'background':'#fff','color':'#0054A6','line-height':'52px','padding':'14px 0'}"
							:cell-style="{'color':'#0054A6','padding':'20px 0'}">
							<el-table-column label="供应商" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">0133</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="报价次数" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">1</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="成交次数" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">0133</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="成交率" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">1%</span>
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div style="background-color: #fff;" class="p-[20px] v-flex v-row-right">
							<el-pagination background layout="prev, pager, next" :default-page-size="6" :total="1000" :pager-count="5"/>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-card class="!border-none p-4" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				产品统计
			</div>
			<div >
				<el-row>
					<el-col :span="11">
						<div class="pt-[10px] pb-[10px] pl-[20px] bg-[#0054A6] color-fff" >产品销量排行</div>
						<el-table size="large" :data="list"
							:header-cell-style="{'background':'#fff','color':'#0054A6','line-height':'52px','padding':'14px 0'}"
							:cell-style="{'color':'#0054A6','padding':'20px 0'}">
							<el-table-column label="排名" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">0133</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="产品名称" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">1</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="创建" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">0133</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="销量" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">1</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="总销售金额" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">1</span>
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div style="background-color: #fff;" class="p-[20px] v-flex v-row-right">
							<el-pagination background layout="prev, pager, next" :default-page-size="6" :total="1000" :pager-count="5"/>
						</div>
					</el-col>
					<el-col :span="11" class="ml-[30px]">
						<div class="pt-[10px] pb-[10px] pl-[20px] bg-[#0054A6] color-fff" >销售品类（产品分类）</div>
						<el-table size="large" :data="list"
							:header-cell-style="{'background':'#fff','color':'#0054A6','line-height':'52px','padding':'14px 0'}"
							:cell-style="{'color':'#0054A6','padding':'20px 0'}">
							<el-table-column label="排名" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">0133</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="产品分类" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">1</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="销量" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">1</span>
									</el-button>
								</template>
							</el-table-column>
							<el-table-column label="总销售金额" prop="scene_name" align="left">
								<template #default="{ row }">
									<el-button type="primary" link>
										<span class="main-color">1</span>
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div style="background-color: #fff;" class="p-[20px] v-flex v-row-right">
							<el-pagination background layout="prev, pager, next" :default-page-size="6" :total="1000" :pager-count="5"/>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	const list = ref<Array<any>>([
		{},{},{}
	])
</script>

<style lang="scss" scoped>
	.el-card{
		background-color: #f5f5f5;
	}
</style>